import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Link, useNavigate } from 'react-router-dom'

export default function NotFound() {
  const [count, setCount] = useState(10)
  let timerRef = useRef(-1)
  const nav = useNavigate()

  useEffect(() => {
    timerRef.current = setInterval(() => {
      setCount(count => count - 1)
    }, 1000)

    // 清除定时器
    return () => {
      clearInterval(timerRef.current)
    }
  }, [])

  useEffect(() => {
    if (count === 0) {
      nav('/', { replace: true })
    }
  }, [count, nav])

  return (
    <div className={styles.root}>
      <h1>对不起，您访问的页面不存在~</h1>
      <p>
        将在 {count} 秒后，返回首页（或者：点击立即返回
        <Link to="/">首页</Link>）
      </p>
    </div>
  )
}
